<template>
	<view id="detail" v-if="detail.id != undefined">
		<!-- 输入评论 -->
		<view class="enterComments" :style="{ bottom: height + 'px' }" v-if="focus">
			<textarea
				class="enterComments_textarea"
				:adjust-position="false"
				placeholder-style="color:#CCCCCC"
				@blur="bindblur"
				@focus="bindFocus"
				:focus="focus"
				:show-confirm-bar="false"
				placeholder="请输入评论..."
				v-model="content"
			/>
			<button :class="{ enterComments_btn: true, enterComments_btn_active: content != '' ? true : false }" @click="onComments">发送</button>
		</view>
		<!-- 轮播图 -->
		<view class="d_banner">
			<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="5000" :duration="500" :circular="true" @change="bannerChange">
				<swiper-item v-if="detail.video.url != undefined && detail.video.url" @longpress="saveVideo(detail.video.url)">
					<video :src="detail.video.url" controls class="swiper-item"></video>
				</swiper-item>
				<swiper-item v-for="(item, i) in detail.img" :key="i">
					<image class="swiper-item" :src="IMG_URL + item.img" mode="aspectFit" @click="lookImg(i)"></image>
				</swiper-item>
			</swiper>
			<view class="banner_num">{{ current }}/{{ detail.video.url != undefined && detail.video.url ? detail.img.length + 1 : detail.img.length }}</view>
		</view>
		<!-- 详细信息 -->
		<view class="detail_info">
			<view class="info_tit">
				<view class="info_name">{{ detail.type }}</view>
				<view class="info_characteristic" v-if="detail.jueyu">已绝育</view>
				<view class="info_characteristic" v-if="detail.drug">已驱虫</view>
				<view class="info_characteristic" v-if="detail.needle_num > 0">{{ detail.needle_num }}针疫苗</view>
			</view>
			<view class="identity_info">
				<!-- <view>
					身份证：<text style="color: #FC8F8F;" @click="setClipboardData(detail.catid)">{{ detail.catid }}</text>
				</view> -->
				<view @click="setClipboardData(detail.catid)">身份证：{{ detail.catid }}</view>
				<text>发布时间：{{ detail.time }}</text>
			</view>
			<view class="cat_msg">
				<view class="m_item">
					<icon class="icon_sr"></icon>
					<text>{{ detail.birth }}</text>
				</view>
				<view class="m_item">
					<icon class="icon_sex"></icon>
					<text>{{ detail.sex == 1 ? 'DD' : 'MM' }}</text>
				</view>
				<view class="m_item">
					<icon class="icon_name"></icon>
					<text>{{ detail.name }}</text>
				</view>
				<view class="m_item">
					<icon class="icon_address"></icon>
					<text>{{ detail.city }}</text>
				</view>
				<view class="m_item">
					<icon class="icon_tz"></icon>
					<text>{{ detail.weight }}kg</text>
				</view>
				<view class="m_item">
					<icon class="icon_color"></icon>
					<text>{{ detail.color }}</text>
				</view>
			</view>
			<!-- TA的故事 -->
			<view class="h_title">TA的故事</view>
			<view class="h_txt">{{ detail.note }}</view>
			<!-- 收藏 -->
			<view class="collect-box">
				<view class="collect" :class="{ 'collect-active': detail.if_collect == 1 }" @click="bindCollect">
					<icon class="icon-collect" :class="{ 'icon-collect-active': detail.if_collect == 1 }"></icon>
					<text>{{ detail.if_collect == 1 ? '已收藏' : '收藏' }}</text>
				</view>
			</view>
		</view>
		<!-- 空白 -->
		<view class="kb"></view>
		<!-- 评论 -->
		<view class="comment_box" v-if="detail.comment.length">
			<view class="comment_title">全部评论 ({{ detail.comment.length }})</view>
			<view class="c_list">
				<view class="c_item" v-for="(item, i) in detail.comment" :key="i">
					<image :src="item.headimgurl" mode="" class="i_left"></image>
					<view class="i-right">
						<view class="ir_o">
							<text>{{ item.nickname }}</text>
							<text>{{ item.time }}</text>
						</view>
						<view class="ir_content">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="bottom">
			<view class="bottom_item" @click="bindComment">
				<icon class="icon_pl"></icon>
				<text>评论</text>
			</view>
			<view class="bottom_item" @click="bindLike">
				<icon class="icon_dz" :class="{ icon_dz_active: detail.if_like == 1 }"></icon>
				<text>点赞</text>
			</view>
			<view class="bottom_item" @tap="bindShare">
				<icon class="icon_fx"></icon>
				<text>分享</text>
				<!-- <button open-type="share" class="share"></button> -->
			</view>
			<button class="ly_btn" @click="adoptCat(id)">领养TA</button>
		</view>
		<!-- 分享弹出框 -->
		<uni-popup ref="sharePopup" type="bottom">
			<view class="share-popup">
				<button open-type="share" class="share-btn">发送给朋友</button>
				<button class="poster-canvas" @tap="bindPoster">生成海报</button>
				<button class="share-close" @tap="bindCloseShare">取消</button>
			</view>
		</uni-popup>
		<!-- 生成海报 -->
		<view class="poster-box" v-show="isposter">
			<!-- 遮罩层 -->
			<view class="floating_layer" @click="closePoster"></view>
			<view class="poster-content">
				<!-- <icon class="icon-close"></icon> -->
				<view class="canvas" id="myCanvas"><canvas canvas-id="canvas1" :disable-scroll="true"></canvas></view>
				<!-- <button type="default">保存图片</button> -->
			</view>
			<view class="save-poster" @click="saveCanvas">
				<icon class="icon-save"></icon>
				<text>保存图片</text>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
import { lxmCatInfo, lxmLike, lxmComment, lxmCode, backCode, lxmLogin, lxmCollect } from '@/api/index.js';
// import {IMG_URL} from '@/util/config.js'
import { formatTime } from '@/util/time.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			current: 1, //轮播图索引 +1
			id: '', //商品id
			detail: {}, //详情
			IMG_URL: app.globalData.IMG_URL, //地址前缀
			focus: false, //评论显示
			height: -900,
			content: '', //评论内容
			uid: '',
			isposter: false, //是否显示海报
			qrCodeImg: '', //小程序码
			headimgurl: '', //头像
			canvansBg: '', //海报背景图
			shopImg: '', //海报商品图片
			poster: '',
			userInfo: {}
		};
	},
	methods: {
		// 复制身份证
		setClipboardData(val) {
			uni.setClipboardData({
				data: val,
				success: function() {
					uni.showToast({
						title: '复制成功',
						duration: 2000
					});
				}
			});
		},
		// 获取详情信息
		lxmCatInfo() {
			lxmCatInfo({
				id: this.id,
				openid: this.uid
			}).then(res => {
				res.time = formatTime(parseInt(res.time));
				res.birth = formatTime(parseInt(res.birth));
				res.comment.forEach(val => {
					val.time = formatTime(parseInt(val.time));
				});
				this.detail = res;
				console.log(res);
			});
		},

		// 轮播图切换
		bannerChange(e) {
			this.current = e.detail.current + 1;
		},

		// 领养TA
		adoptCat(id) {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			uni.navigateTo({
				url: `/pages/adoptApplication/adoptApplication?id=${id}`
			});
		},

		// 收藏
		bindCollect: function() {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			lxmCollect({
				openid: this.uid,
				id: this.id
			}).then(res => {
				this.lxmCatInfo();
				uni.showToast({
					title: '收藏成功',
					duration: 1500,
					icon: 'success'
				});
			});
		},

		// 点赞
		bindLike() {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			lxmLike({
				openid: this.uid,
				catid: this.id
			}).then(res => {
				this.lxmCatInfo(); //商品信息
				uni.showToast({
					title: '点赞成功',
					duration: 1500,
					icon: 'success'
				});
			});
		},

		// 评论
		bindComment() {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			this.focus = true;
		},

		// 发布评论
		onComments() {
			lxmComment({
				openid: this.uid,
				catid: this.id,
				content: this.content
			}).then(res => {
				this.lxmCatInfo(); //商品信息
				uni.showToast({
					title: '评论成功，待审核',
					duration: 1500,
					icon: 'success'
				});
			});
		},

		// 输入框获取焦点
		bindFocus(e) {
			this.height = e.detail.height;
		},

		// 失去焦点
		bindblur(e) {
			// this.height=100
			this.focus = false;
		},

		// 分享
		bindShare: function() {
			if (this.userInfo.headimgurl == undefined) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			// this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.$refs.sharePopup.open();
		},

		// 取消分享
		bindCloseShare: function() {
			this.$refs.sharePopup.close();
		},

		// 关闭遮罩层
		closePoster: function() {
			this.isposter = false; //是否显示
		},

		// 生成海报
		bindPoster: function() {
			this.bindCloseShare(); //关闭
			this.isposter = true;
			uni.showLoading({
				title: '正在生成',
				mask: true
			});
			// 验证生成海报图片有没有全部生成
			if (this.canvansBg == '') {
				this.getCanvansBg();
				return false;
			}
			if (this.shopImg == '') {
				this.getShopImg();
				return false;
			}
			// if (this.headimgurl == "") {
			// 	this.getHeadimgurl();
			// 	return false
			// }
			if (this.qrCodeImg == '') {
				this.lxmCode();
				return false;
			}
			let canvansX = 19.5;
			let ctx = uni.createCanvasContext('canvas1');
			ctx.drawImage(this.canvansBg, 0, 0, 343, 557); //背景图片
			ctx.drawImage(this.shopImg, 24.5, 87, 293.5, 252.5); //商品图片
			ctx.setFontSize(13);
			ctx.setFillStyle('#FC8F8F');
			ctx.setTextAlign('center');
			ctx.fillText(`${this.detail.type}/${this.detail.birth}/${this.detail.sex == 1 ? '哥哥' : '妹妹'}`, 171.5, 366);
			ctx.setFontSize(13);
			ctx.setFillStyle('#FC8F8F');
			ctx.setTextAlign('left');
			ctx.fillText(`Ta的故事`, 34, 410);
			this.drawText(ctx, this.detail.note, 34, 430, 280, 45); // ta的故事
			ctx.setFontSize(19);
			ctx.setFillStyle('#333333');
			ctx.setTextBaseline('middle');
			ctx.fillText('领 小 咪', 40, 505); //小程序名字
			ctx.setFontSize(11);
			ctx.setFillStyle('#666666');
			ctx.fillText('一个专注猫咪免费领养的平台', 10, 530); //店铺介绍
			ctx.setFontSize(12);
			ctx.setFillStyle('#CCCCCC');
			ctx.fillText('长按小程序码', 180, 505); //说明
			ctx.setFontSize(12);
			ctx.setFillStyle('#CCCCCC');
			ctx.fillText('查看Ta的详情', 180, 525); //说明
			ctx.drawImage(this.qrCodeImg, 267, 478, 65, 65); //二维码
			ctx.draw();
			setTimeout(() => {
				//下面的13以及减26推测是因为在写样式的时候写了固定的zoom: 50%而没有用像素比缩放导致的黑边，所以在生成时进行了适当的缩小生成，这个大家可以自行尝试
				uni.canvasToTempFilePath({
					canvasId: 'canvas1',
					x: 0,
					y: 0,
					width: 1500,
					height: 2435,
					destWidth: 1500,
					destHeight: 2435,
					success: res => {
						uni.hideLoading();
						this.poster = res.tempFilePath;
					}
				});
			}, 200);
		},

		// 文字换行
		drawText: function(ctx, str, leftWidth, initHeight, canvasWidth, maxLength) {
			var lineWidth = 0;
			var lastSubStrIndex = 0; // 每次开始截取的字符串的索引
			ctx.setFontSize(12); // 设置字体大小
			ctx.setFillStyle('#333333'); // 设置字体颜色
			ctx.setTextAlign('left');
			for (let i = 0; i < maxLength; i++) {
				lineWidth += ctx.measureText(str[i]).width;
				if (lineWidth > canvasWidth) {
					ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); // 绘制截取部分
					initHeight += 15; // 24为字体的高度
					lineWidth = 0;
					lastSubStrIndex = i;
				}
				if (i == maxLength - 1) {
					// 绘制剩余部分
					if (maxLength >= str.length - 1) {
						ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
					} else {
						ctx.fillText(str.substring(lastSubStrIndex, i + 1) + '...', leftWidth, initHeight);
					}
				}
			}
		},

		// 获取小程序码
		lxmCode: function() {
			lxmCode({
				goods_id: this.id,
				openid: this.uid
			}).then(res => {
				uni.getImageInfo({
					src: `${res}`,
					success: image => {
						this.qrCodeImg = image.path;
						this.bindPoster();
					}
				});
			});
		},

		// 获取头像（画布）
		getHeadimgurl: function() {
			uni.getImageInfo({
				src: this.userInfo.headimgurl,
				success: image => {
					this.headimgurl = image.path;
					this.bindPoster();
				}
			});
		},

		// 获取背景图片（画布）
		getCanvansBg: function() {
			uni.getImageInfo({
				src: `${this.IMG_URL}acat-xcx/adopt-canvas-bg.png`,
				success: image => {
					this.canvansBg = image.path;
					this.bindPoster();
				}
			});
		},

		// 获取商品图片（画布）
		getShopImg: function() {
			uni.getImageInfo({
				src: `${this.IMG_URL + this.detail.img[0].img + '?x-oss-process=image/resize,m_pad,h_504,w_586,color_F8F8F8'}`,
				success: image => {
					this.shopImg = image.path;
					this.bindPoster();
				}
			});
		},

		// 保存图片
		saveImageToPhotosAlbum: function() {
			uni.saveImageToPhotosAlbum({
				filePath: this.poster,
				success: e => {
					this.isposter = false;
					uni.showToast({
						title: '保存成功',
						duration: 2000
					});
				},
				fail: err => {
					console.log(err);
				}
			});
		},

		// 保存海报
		saveCanvas: function() {
			// this.saveImageToPhotosAlbum();
			uni.getSetting({
				success: res => {
					if (!res.authSetting['scope.writePhotosAlbum']) {
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success: () => {
								this.saveImageToPhotosAlbum();
							},
							fail: () => {
								uni.showModal({
									title: '提示',
									content: '检测到您没打开相册授权，是否去设置打开？',
									success: res => {
										if (res.confirm) {
											uni.openSetting({
												success: () => {
													this.saveImageToPhotosAlbum();
												}
											});
										}
									}
								});
							}
						});
					} else {
						this.saveImageToPhotosAlbum();
					}
				}
			});
		},

		// 通过小程序码获取商品id
		backCode: function(id) {
			uni.login({
				provider: 'weixin',
				success: loginRes => {
					// 获取openid
					lxmLogin({
						jscode: loginRes.code
					}).then(res => {
						backCode({
							id: id,
							openid: res.openid
						}).then(res => {
							this.id = res;
							this.lxmCatInfo();
							console.log(res);
						});
						console.log(res);
					});
				}
			});
		},

		// 点击查看轮播图
		lookImg: function(index) {
			let arr = [];
			this.detail.img.forEach(val => {
				arr.push(this.IMG_URL + val.img);
			});
			console.log(arr);
			uni.previewImage({
				urls: arr,
				current: index
			});
		},

		// 保存视频
		saveVideo: function(url) {
			uni.showModal({
				content: '保存视频',
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: '保存视频中...'
						});
						uni.downloadFile({
							url: url,
							success: res1 => {
								if (res1.statusCode === 200) {
									uni.hideLoading();
									uni.saveVideoToPhotosAlbum({
										filePath: res1.tempFilePath,
										success: function() {
											uni.hideLoading();
										},
										fail: err => {
											uni.getSetting({
												success(res2) {
													if (!res2.authSetting['scope.writePhotosAlbum']) {
														uni.showModal({
															title: '提示',
															content: '授权保存到相册',
															success: resp => {
																if (resp.confirm) {
																	uni.openSetting({
																		success: resPhoto => {
																			console.log(resPhoto.authSetting);
																		},
																		fail() {}
																	});
																}
															}
														});
													}
												}
											});
										}
									});
								}
							}
						});
					}
				}
			});
		}
	},
	onLoad(options) {
		this.uid = uni.getStorageSync('openid');
		if (options.scene) {
			const scene = decodeURIComponent(options.scene);
			this.backCode(scene);
			console.log(scene);
		} else {
			this.id = options.id;
			this.lxmCatInfo(); //商品信息
		}
	},
	onShow() {
		this.uid = uni.getStorageSync('openid');
		if (uni.getStorageSync('userInfo')) {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
		}
	},

	// 分享
	onShareAppMessage() {
		return {
			title: '领小咪'
		};
	}
};
</script>

<style lang="scss">
#detail {
	margin-bottom: 100rpx;

	.d_banner {
		width: 100%;
		height: 850rpx;
		position: relative;

		.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;
			}
		}

		.banner_num {
			width: 128rpx;
			height: 58rpx;
			background: #000000;
			border-radius: 33rpx;
			opacity: 0.39;
			text-align: center;
			line-height: 58rpx;
			color: #ffffff;
			position: absolute;
			bottom: 52rpx;
			right: 52rpx;
		}
	}

	.detail_info {
		padding: 32rpx 32rpx 58rpx;

		.info_tit {
			display: flex;
			align-items: center;
			margin-bottom: 18rpx;

			.info_name {
				font-size: 36rpx;
				color: #333333;
				font-weight: 600;
			}

			.info_characteristic {
				// width: 86rpx;
				padding: 0 10rpx;
				height: 36rpx;
				background: rgba(252, 146, 146, 0.1);
				border-radius: 18rpx;
				font-size: 22rpx;
				text-align: center;
				line-height: 36rpx;
				color: #fc8f8f;
				margin-left: 12rpx;
			}
		}

		.identity_info {
			color: #999999;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 36rpx;
		}

		.cat_msg {
			padding: 28rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
			border-radius: 8px;
			margin-bottom: 36rpx;

			.m_item {
				display: flex;
				align-items: center;
				color: #999999;
				font-size: 24rpx;

				& > text {
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				& > icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 14rpx;
				}

				.icon_sr {
					background: url(../../static/image/icon-age.png) no-repeat;
					background-size: cover;
				}

				.icon_sex {
					background: url(../../static/image/icon-sex.png) no-repeat;
					background-size: cover;
				}

				.icon_name {
					background: url(../../static/image/icon-name.png) no-repeat;
					background-size: cover;
				}

				.icon_address {
					background: url(../../static/image/icon-address.png) no-repeat;
					background-size: cover;
				}

				.icon_tz {
					background: url(../../static/image/icon-zhongliang.png) no-repeat;
					background-size: cover;
				}

				.icon_color {
					background: url(../../static/image/icon-color.png) no-repeat;
					background-size: cover;
				}

				&:nth-of-type(1) {
					margin-bottom: 55rpx;
					width: 35%;
				}

				&:nth-of-type(2) {
					margin-bottom: 55rpx;
					width: 35%;
				}

				&:nth-of-type(3) {
					margin-bottom: 55rpx;
				}

				&:nth-of-type(4) {
					width: 35%;
				}

				&:nth-of-type(5) {
					width: 35%;
				}
			}
		}

		.h_title {
			color: #555555;
			font-weight: 600;
			padding-left: 14rpx;
			position: relative;
			margin-bottom: 16rpx;
			margin-bottom: 27rpx;

			&::after {
				content: '';
				width: 6rpx;
				height: 22rpx;
				background: #fc8f8f;
				border-radius: 3rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.h_txt {
			font-size: 24rpx;
			color: #999999;
		}

		.collect-box {
			height: 52rpx;
			margin-top: 52rpx;
			.collect {
				width: 188rpx;
				height: 52rpx;
				background: #ffffff;
				border-radius: 40rpx;
				border: 2rpx solid #999999;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #999999;
				font-size: 28rpx;
				float: right;
				.icon-collect {
					width: 32rpx;
					height: 32rpx;
					background: url(../../static/image/detail-collect.png) no-repeat;
					background-size: cover;
					margin-right: 10rpx;
				}
				.icon-collect-active {
					background: url(../../static/image/detail-collect-active.png) no-repeat;
					background-size: cover;
				}
			}

			.collect-active {
				color: #fc8f8f;
				border-color: #fc8f8f;
			}
		}
	}

	.comment_box {
		padding: 32rpx 0 32rpx 32rpx;

		.comment_title {
			color: #555555;
			font-weight: 600;
		}

		.c_list {
			.c_item {
				display: flex;
				align-items: center;

				.i_left {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}

				.i-right {
					flex: 1;
					box-sizing: border-box;
					font-size: 20rpx;
					border-bottom: 1rpx solid #efefef;
					padding: 32rpx 32rpx 24rpx 0;

					.ir_o {
						display: flex;
						justify-content: space-between;
						color: #666666;
						margin-bottom: 3rpx;

						& > text:nth-of-type(2) {
							color: #cccccc;
						}
					}

					.ir_content {
						color: #333333;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.bottom {
		height: 98rpx;
		padding: 0 32rpx 0 55rpx;
		box-sizing: border-box;
		box-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.06);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.bottom_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #666666;
			font-size: 22rpx;
			padding-right: 30rpx;
			position: relative;
			.share {
				width: 100%;
				height: 100%;
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
			}

			& > icon {
				width: 36rpx;
				height: 36rpx;
				margin-bottom: 2rpx;
			}

			.icon_pl {
				background: url(../../static/image/detail-pl.png);
				background-size: cover;
			}

			.icon_dz {
				background: url(../../static/image/detail-dz.png);
				background-size: cover;
			}

			.icon_dz_active {
				background: url(../../static/image/like-active.png);
				background-size: cover;
			}

			.icon_fx {
				background: url(../../static/image/detail-fx.png);
				background-size: cover;
			}
		}

		.ly_btn {
			padding: 0;
			margin: 0;
			width: 258rpx;
			height: 66rpx;
			background: rgba(252, 95, 95, 0.7);
			box-shadow: 0px 3px 9px 0px rgba(252, 143, 143, 0.32);
			border-radius: 40rpx;
			color: #ffffff;
			font-size: 32rpx;
			line-height: 66rpx;
		}
	}
	.enterComments {
		padding: 20rpx 32rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		position: fixed;
		bottom: 200px;
		left: 0;
		right: 0;
		z-index: 99999;
		.enterComments_textarea {
			width: 550rpx;
			height: 168rpx;
			padding: 18rpx 28rpx;
			box-sizing: border-box;
			border-radius: 18rpx;
			background: #f1f2f6;
			color: #333333;
		}
		.enterComments_btn {
			padding: 0;
			margin: 0;
			width: 92rpx;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			color: #ffffff;
			background: #dadadc;
			border-radius: 12rpx;
			font-size: 28rpx;
		}
		.enterComments_btn_active {
			background: #fc8f8f;
		}
	}
}
.share-popup {
	background: #f5f5f5;

	& > button {
		border-radius: 0;
		font-size: 32rpx;
		height: 110rpx;
		line-height: 110rpx;
	}

	.share-btn {
		border-bottom: 4rpx solid #f5f5f5;
	}

	.share-close {
		margin-top: 20rpx;
	}
}

.poster-box {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	.save-poster {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 108rpx;
		background: #ffffff;
		color: #666666;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.icon-save {
			width: 50rpx;
			height: 40rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/save-canvas.png) no-repeat;
			background-size: cover;
			margin-bottom: 7rpx;
		}
	}

	.floating_layer {
		width: 100%;
		height: 100%;
		background: #000000;
		opacity: 0.2;
	}

	.poster-content {
		position: absolute;
		top: 46rpx;
		left: 50%;
		transform: translateX(-50%);

		.canvas {
			width: 343px;
			height: 557px;
			background: #ffffff;
			border-radius: 10rpx;
			overflow: hidden;

			& > canvas {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
}
</style>
